<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_页面固定广告条</title>
    <style>
        .top{
            background-color: #5aa4ae;
            height: 120px;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100vw; /* 100% viewport 视口宽度，也就是全屏宽 */



        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">我是内容 lorem*50 Table补全
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque, aut culpa eveniet fugiat hic id ipsa
        laboriosam molestias quas quidem sint sit voluptatibus! Accusamus est iste sapiente sed. Nemo.
    </div>
    <div>Aliquam cum eveniet id ipsum mollitia non porro sequi. Esse numquam officia rerum saepe vel, voluptates.
        Dolores explicabo id itaque, iusto magni minima mollitia odio quas quisquam repellendus, sit sunt?
    </div>
    <div>Laudantium voluptate, voluptatibus! Ab aliquam deserunt ex excepturi ipsa iste laboriosam maxime nemo pariatur
        qui! Asperiores eveniet velit veniam. Ex, necessitatibus ratione. Expedita facilis in ipsa, nisi repellendus
        sunt suscipit.
    </div>
    <div>Ab assumenda consequatur dolorem eaque eos exercitationem fugiat hic ipsam iste iure magni molestias nam nihil
        nisi, non officia perspiciatis quibusdam reiciendis rerum sunt tempora ullam velit vitae voluptates
        voluptatibus!
    </div>
    <div>Ad animi aspernatur cumque cupiditate, error hic illo iure iusto laborum magnam qui rem voluptas. Alias
        asperiores deleniti, deserunt dolor dolores doloribus est itaque maiores minima numquam odit reprehenderit,
        ullam.
    </div>
    <div>A autem consectetur cupiditate eius est facere fugiat perferendis similique unde vero! Autem corporis cumque
        debitis dolores eligendi enim explicabo, fugit maxime, minus nam odio perferendis quas quis sit sunt!
    </div>
    <div>Aperiam autem corporis dignissimos ea earum eius eveniet, ex, harum id iste laboriosam non optio praesentium
        quam quod ratione reiciendis sit sunt tempore ullam. Consequatur ducimus odio pariatur sequi ut!
    </div>
    <div>Accusamus, eius, eligendi fugit id illo laboriosam nesciunt odio pariatur perferendis praesentium provident
        quia totam? Cumque distinctio eveniet, explicabo harum ipsam minus non nulla officia provident, repudiandae
        soluta tempore tenetur.
    </div>
    <div>Aliquam aliquid at consectetur, ducimus eaque eius eligendi hic ipsam itaque iure nam nihil non, pariatur porro
        possimus quaerat, quos sapiente sed! Autem consequatur deleniti dolores facilis incidunt pariatur, quidem.
    </div>
    <div>A labore nam non omnis quam quia, reiciendis. Ad aspernatur assumenda at autem culpa delectus, dicta hic ipsa,
        labore, libero minima minus nesciunt quaerat ratione repudiandae soluta unde? Dolor, ducimus!
    </div>
    <div>A ea ipsa nesciunt perferendis unde. Accusamus, accusantium adipisci alias architecto beatae enim, esse,
        expedita explicabo fugit incidunt maxime molestiae natus nesciunt quasi reprehenderit sed sint temporibus ullam
        veniam voluptatem.
    </div>
    <div>Animi dolor dolorum ex facilis hic illo ipsam iure iusto laborum magnam minus modi necessitatibus repellendus
        repudiandae, suscipit unde velit veniam? Cum dicta eveniet facilis iure omnis quasi quos sequi.
    </div>
    <div>Animi consequatur cum eum ipsum laudantium nobis quidem! Odio quas quidem voluptate? Ab aliquid blanditiis cum,
        debitis delectus dolor earum explicabo facere fugiat fugit inventore quidem totam veniam veritatis voluptate!
    </div>
    <div>Delectus, iure tempore! Aut debitis, dignissimos ducimus ea earum eligendi enim ex explicabo facere id illo
        ipsam itaque libero molestiae, mollitia omnis placeat qui quibusdam quod rem temporibus ut, velit?
    </div>
    <div>Architecto assumenda beatae dicta ea error expedita ipsa itaque labore laboriosam, magnam neque nostrum,
        sapiente sit suscipit vero. Amet autem beatae debitis doloribus facere illo ipsam minima nemo quam voluptas?
    </div>
    <div>Alias eaque facilis provident quia quod. Accusantium adipisci aperiam assumenda cum cupiditate deserunt
        dignissimos error harum impedit iste minus nihil numquam quam quidem sapiente, sit veniam, voluptate!
        Consequatur, deserunt, sit?
    </div>
    <div>Accusamus ad, alias autem, beatae blanditiis consectetur, dolor et excepturi fugit harum minus nisi nulla
        perspiciatis rerum similique temporibus voluptates? Asperiores aspernatur consequatur fugit laborum minima nam
        possimus reprehenderit soluta.
    </div>
    <div>Dignissimos distinctio hic iste iure magnam tempora ullam! Dolor dolores error nisi omnis veniam. Aliquid
        cumque debitis deserunt enim exercitationem expedita explicabo, hic impedit iusto maxime necessitatibus, quaerat
        reiciendis totam!
    </div>
    <div>Amet animi asperiores aut corporis cum deserunt dignissimos ea eaque eos error, eveniet expedita fuga, fugiat
        inventore ipsam ipsum laborum molestias nam nobis nostrum nulla ratione rerum saepe sit tempora.
    </div>
    <div>Ab aspernatur, quod? Cum ipsam libero natus non, nulla quo suscipit. Architecto aspernatur, debitis et, eveniet
        exercitationem fuga illo impedit ipsam nobis quas quia quibusdam rem, sed sit temporibus vel.
    </div>
    <div>Asperiores dignissimos dolores, doloribus eius explicabo id, ipsam nam nemo nobis reiciendis repellendus,
        reprehenderit repudiandae voluptatem. Deserunt est nemo nulla numquam porro quis reiciendis similique. Adipisci
        eaque ipsa ratione suscipit!
    </div>
    <div>Accusamus cumque debitis est facere nesciunt quo, quos unde velit. Architecto aspernatur aut consequatur
        distinctio et explicabo in laudantium libero molestias nihil nisi, officia perspiciatis porro, provident
        quibusdam, quo veniam.
    </div>
    <div>Accusantium animi aut blanditiis culpa cupiditate distinctio dolore dolores eaque eos esse eum excepturi facere
        fugit iusto nam necessitatibus nemo, nobis odio optio quas qui, ratione recusandae tempore vel veritatis.
    </div>
    <div>Aperiam atque culpa debitis deserunt enim exercitationem illum inventore iure laboriosam mollitia nemo neque,
        praesentium quis quos reiciendis rem repellat sit suscipit totam unde. Deleniti expedita impedit mollitia natus
        voluptatem.
    </div>
    <div>A alias aspernatur beatae consequuntur cum et exercitationem facilis, ipsum itaque laboriosam laudantium
        placeat porro quis quod ratione sequi sit suscipit totam vero, voluptate. Nesciunt nulla, odio. Delectus,
        deleniti, tempora.
    </div>
    <div>Adipisci, aut blanditiis culpa dignissimos ducimus eius eos fugiat fugit illum ipsa laborum laudantium libero
        maiores minus nisi numquam placeat possimus quasi quis quisquam quo ratione, sed suscipit totam voluptates!
    </div>
    <div>Accusantium aperiam at consectetur, consequatur cum dolorum, ipsam laborum natus nemo neque odio quis ratione,
        recusandae repellat ullam. Cupiditate dolor doloribus ipsa maiores obcaecati officia pariatur, quia vel vitae
        voluptatem?
    </div>
    <div>Atque blanditiis commodi cumque deleniti dolore eligendi error est excepturi illo modi perspiciatis praesentium
        provident ratione rem rerum vitae, voluptatum. Aperiam ea eaque harum nostrum provident quasi quidem saepe unde.
    </div>
    <div>Aperiam architecto debitis deleniti dolorum eum, excepturi, illum ipsum laborum laudantium maxime minus nostrum
        optio pariatur quisquam ratione rem sequi sit vel vitae voluptatem? Est facilis mollitia repellat sint ut!
    </div>
    <div>Exercitationem fuga id illum iusto nemo non odit placeat tempore. Aliquid atque, autem culpa deleniti ex hic
        incidunt ipsam modi officia officiis omnis quos, reiciendis rem reprehenderit suscipit unde veritatis!
    </div>
    <div>A architecto delectus eaque eos eum molestiae, provident sequi? Ab aliquid cumque dicta doloribus fuga ipsum
        maxime, minima pariatur quam, quisquam repellat, repellendus rerum suscipit? Atque commodi corporis illo nihil.
    </div>
    <div>Aliquid, asperiores beatae consequuntur dignissimos dolorum ducimus laboriosam necessitatibus neque perferendis
        provident ratione reiciendis repellat repellendus temporibus tenetur totam vero. Cumque explicabo inventore
        ipsam quisquam quod recusandae saepe, totam veniam.
    </div>
    <div>Accusamus adipisci aliquam aliquid beatae consequuntur deserunt, distinctio ducimus esse fuga fugit impedit in
        ipsum laborum laudantium libero mollitia odio omnis optio perspiciatis quisquam quod reiciendis saepe, sunt
        ullam voluptas.
    </div>
    <div>Accusamus alias aperiam aut beatae corporis, deserunt dolor dolore eligendi eum ipsum libero magni minima
        molestiae mollitia nulla odit perspiciatis porro quam quis rerum sapiente sed sunt ut vel, voluptate.
    </div>
    <div>Alias beatae dolores et hic libero minima, molestias nesciunt nostrum, omnis ratione vero voluptate. Aliquam
        commodi eum, explicabo hic illum in, iusto mollitia nostrum obcaecati officiis soluta totam voluptas,
        voluptatibus!
    </div>
    <div>Commodi doloremque inventore magnam magni, repudiandae veniam voluptate? Ab aliquam asperiores autem commodi
        cum dolorum eligendi, eos eveniet hic illo laboriosam nemo, nulla odit perferendis porro, reiciendis sint velit
        voluptatibus!
    </div>
    <div>Ad delectus, deleniti doloribus eum, eveniet facere illum, impedit maiores numquam perferendis perspiciatis
        porro provident quam qui quo quos sed vel? Dolor impedit iure magnam quod sint totam vero voluptates!
    </div>
    <div>Earum hic inventore minus numquam repellendus? Autem consectetur debitis dolore doloremque explicabo fugit,
        libero nihil, nisi quidem reprehenderit veniam voluptas! Eius excepturi magni omnis perspiciatis ullam! Eaque in
        iusto neque!
    </div>
    <div>Aperiam aut ducimus, impedit in laborum minima minus, mollitia odio quibusdam, ratione suscipit unde. Commodi
        deserunt doloremque dolores eaque error maxime nulla perferendis possimus, quis voluptatibus. Obcaecati rerum
        sunt voluptas!
    </div>
    <div>Ab accusantium at autem commodi consequuntur dolorum ea, enim eveniet illum impedit, ipsum iure laborum
        laudantium magni natus nobis obcaecati officia quam, rem rerum similique sit suscipit ut voluptatibus
        voluptatum.
    </div>
    <div>Deleniti est maxime modi? Aspernatur consequuntur eum nam nisi nobis quae suscipit ullam! Aliquam consequatur
        culpa, deleniti earum, inventore ipsam iusto modi natus nihil sequi tempore vero voluptatem? Animi, maxime.
    </div>
    <div>Architecto blanditiis consectetur dolor ea eius eligendi esse hic id laudantium magni nam neque nesciunt nihil
        numquam odio optio perferendis praesentium ratione, tenetur totam ullam vero vitae. Culpa, odit, porro.
    </div>
    <div>Accusantium alias autem corporis deserunt eligendi enim esse explicabo illum iste labore maxime nihil nobis
        nostrum perspiciatis placeat, quaerat reprehenderit rerum sunt suscipit ullam. Dolor incidunt iure quidem sed
        voluptatum.
    </div>
    <div>Ad aperiam error et molestiae quibusdam quos, repellendus temporibus! Cupiditate dolores ea nulla quas sit
        voluptatum. Consectetur dignissimos dolores facere fuga, maxime neque numquam odio quae sit sunt? Temporibus,
        voluptas!
    </div>
    <div>A asperiores deleniti dolorum eveniet in ipsa ipsum iure labore magnam molestias nemo officia omnis optio
        perspiciatis quam quas quasi, qui reiciendis rerum voluptate? Consequuntur, ea, reiciendis? Atque, labore,
        officiis?
    </div>
    <div>Aut doloremque doloribus est facere, facilis, harum itaque laboriosam minima molestiae nesciunt non omnis porro
        repellendus similique ut. Ab ad adipisci aspernatur eaque hic iure iusto nesciunt omnis repellat voluptates.
    </div>
    <div>Alias, debitis eum exercitationem facilis fugit ipsam labore molestias perferendis, quam qui quibusdam
        repellendus sunt tempora! A ad, aperiam culpa, itaque iure magni odio omnis provident quam quia, quis totam?
    </div>
    <div>A fugit magni sit tenetur vitae! Ad commodi dolorum esse explicabo laudantium obcaecati, quae. A, accusamus
        cumque delectus dolorem doloremque et expedita hic minima numquam quaerat quo suscipit ut voluptatum?
    </div>
    <div>Accusantium doloremque dolorum explicabo ipsum itaque libero molestiae necessitatibus nihil perferendis, porro
        quaerat saepe sit tempore ullam vitae? Consequuntur, pariatur, quisquam? Et expedita suscipit totam. Iure qui
        repellendus saepe voluptatem?
    </div>
    <div>Deleniti doloremque eius illo illum ipsam nemo nulla pariatur sit soluta voluptatibus. Aperiam cumque dolorem
        eos eum excepturi illum maiores nesciunt possimus quam quo rem similique suscipit temporibus, unde voluptas?
    </div></div>
</body>
</html>